<template>
	<mainContainer>
		<el-row :gutter="35">
			<!-- 部门 -->
			<el-col :span="4" style="padding-right: 20px">
				<div>
					<el-input v-model="filterText" clearable placeholder="请输入部门名称" />
				</div>
				<el-tree
					ref="treeRef"
					:data="deptData"
					:props="defaultProps"
					:default-expand-all="true"
					:expand-on-click-node="false"
					@node-click="handleNodeClick"
					:filter-node-method="filterNode"
				/>
			</el-col>
			<el-col :span="20">
				<!-- 搜索 -->
				<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
					<el-form-item label="用户名">
						<el-input v-model="queryParams.username"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="queryParams.phone"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="initPage">
							<el-icon> <ele-Search /> </el-icon>搜索</el-button
						>
						<el-button @click="resetQuery">
							<el-icon> <ele-Refresh /> </el-icon>重置</el-button
						>
					</el-form-item>
				</el-form>
				<!-- 工具栏 -->
				<div class="hx-table-toolbar">
					<div>
						<el-button type="primary" v-auth="'upms:sysuser:add'" @click="add">
							<el-icon>
								<ele-Plus />
							</el-icon>
							新增</el-button
						>
					</div>
					<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
				</div>
				<!-- 新增修改弹窗 -->
				<Form ref="refForm" @initPage="initPage"></Form>
				<!-- 修改密码 -->
				<el-dialog v-model="dialog" :title="'修改【' + userInfo.username + '】密码'" width="30%" center>
					<ResetPwd v-if="dialog == true" :userId="userInfo.id" @upSuccess="dialog = false" />
				</el-dialog>
				<!-- 登录日志 -->
				<el-dialog v-model="dialogLogin" :title="'【' + userInfo.username + '】登录日志'" width="70%" center>
					<LoginLog v-if="dialogLogin" :userId="userInfo.id" />
				</el-dialog>
				<!-- table列表 -->
				<el-table v-loading="loading" :data="tableData" border>
					<el-table-column prop="username" label="用户名" />
					<el-table-column prop="avatar" label="头像">
						<template #default="scope">
							<el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="nikeName" label="用户昵称" />
					<el-table-column prop="phone" label="手机号" />
					<el-table-column prop="deptName" label="部门" />
					<el-table-column prop="status" label="状态">
						<template #default="scope">
							<dict-tag :options="status" :value="scope.row.status"></dict-tag>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="170" />
					<el-table-column label="操作" align="center" fixed="right" width="220">
						<template #default="scope">
							<el-button link type="primary" v-auth="'upms:sysuser:edit'" @click="edit(scope.row)">
								<el-icon>
									<ele-Edit />
								</el-icon>
								修改</el-button
							>
							<el-button link type="danger" v-auth="'upms:sysuser:del'" @click="del(scope.row.id)">
								<el-icon> <ele-Delete /> </el-icon>删除</el-button
							>
							<el-button link type="primary" v-auth="'upms:sysuser:password'" @click="editPassword(scope.row)">
								<el-icon> <ele-Key /> </el-icon>修改密码</el-button
							>
							<el-button link type="primary" v-auth="'upms:sysuser:get'" @click="showLoginLog(scope.row)">
								<el-icon> <ele-InfoFilled /> </el-icon>登录日志</el-button
							>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<pagination
					v-model:total="page.total"
					v-model:currentPage="page.currentPage"
					v-model:pageSize="page.pageSize"
					@changePage="initPage"
				></pagination>
			</el-col>
		</el-row>
	</mainContainer>
</template>
<script lang="ts" setup name="systemUser">
import { defineAsyncComponent, reactive, ref, toRefs, watch } from 'vue';
import { getPage, delObj } from '/@/api/upms/sysuser';
import { getTreeList } from '/@/api/upms/sysdept';
import { ElMessageBox, ElMessage, ElTree } from 'element-plus';
import { useDict } from '/@/utils/dict';
const Form = defineAsyncComponent(() => import('./form.vue'));
const ResetPwd = defineAsyncComponent(() => import('./info/resetpwd.vue'));
const LoginLog = defineAsyncComponent(() => import('./info/loginlog.vue'));
interface Tree {
	id: number;
	name: string;
	children?: Tree[];
}
// 字典
const { status } = useDict('status');
const state = reactive({
	queryParams: {
		deptId: '',
		username: '',
		phone: '',
	},
	page: {
		total: 0, // 总页数
		currentPage: 1, // 当前页数
		pageSize: 20, // 每页显示多少条
	},
	tableData: [],
	deptData: [],
	userInfo: {
		username: '',
		id: '',
	},
});
const showSearch = ref(true);
const loading = ref(false);
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const dialog = ref(false);
const dialogLogin = ref(false);
const refForm = ref();
const { tableData, queryParams, page, deptData, userInfo } = toRefs(state);
const defaultProps = {
	children: 'children',
	label: 'name',
};
/**
 * 树节点进行筛选时执行的方法
 */
const filterNode = (value: string, data: Tree) => {
	if (!value) return true;
	return data.name.indexOf(value) !== -1;
};
watch(filterText, (val) => {
	treeRef.value!.filter(val);
});
const initPage = async () => {
	loading.value = true;
	let params = {
		current: page.value.currentPage,
		size: page.value.pageSize,
	};
	await getPage(Object.assign(params, queryParams.value))
		.then((response: any) => {
			tableData.value = response.data.data.records;
			page.value.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 重置搜索表单
 */
const resetQuery = () => {
	queryParams.value = {
		deptId: '',
		username: '',
		phone: '',
	};
};
/**
 * 新增按钮
 */
const add = () => {
	refForm.value.initForm();
};
/**
 * 修改按钮
 */
const edit = (row: any) => {
	refForm.value.initForm(row);
};
/**
 * 删除按钮
 */
const del = (id: string) => {
	ElMessageBox.confirm('此操作将删除该用户，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		delObj(id)
			.then(() => {
				ElMessage.success('删除成功');
				initPage();
			})
			.catch(() => {});
	});
};
/**
 * 查询全部部门
 */
const getDeptData = () => {
	getTreeList()
		.then((response: any) => {
			deptData.value = response.data.data;
		})
		.catch(() => {});
};
const handleNodeClick = (row: any) => {
	queryParams.value.deptId = row.parentId === '0' ? null : row.id;
	initPage();
};
const editPassword = (row: any) => {
	userInfo.value = row;
	dialog.value = true;
};
const showLoginLog = (row: any) => {
	userInfo.value = row;
	dialogLogin.value = true;
};
getDeptData();
initPage();
</script>
